<#-- 话题列表  分页 -->
<#-- 页面需引入layer.js 和 DPlayer -->
<@function page="${url_page}" tagId="${url_tagId}">
    <div class="topicModule">
        <div class="topicList">
            <#if topicRelated_topic_page?? && topicRelated_topic_page.records?? && topicRelated_topic_page.records?size gt 0>
                <#list topicRelated_topic_page.records as topic>
                    <div class="topicItem">
                        <div class="avatarBox">
                            <a class="avatarLink" href="user/control/home?userName=${topic.userName}">
                                <#if topic.avatarName != null>
                                    <img src="${topic.avatarPath}100x100/${topic.avatarName}" alt="">
                                <#else>
                                    <!--[if (IE)]><img src="${commonPath}images/min_avata.png" alt=""><![endif]-->
                                    <!--[if !(IE)]><!--><img
                                        avatar="${(topic.nickname != null && topic.nickname??) ?string(topic.nickname , topic.userName)}"
                                        alt=""><!--<![endif]-->
                                </#if>
                            </a>
                        </div>
                        <div class="content clearfix">
                            <ul class="info">
                                <li>
					            	<span class="tag-container">
										<a href="?tagId=${topic.tagId}" class="tag" target="_self">${topic.tagName}</a>
									</span>
                                    <a class="userName" href="user/control/home?userName=${topic.userName}"
                                       target="_self">
                                        ${(topic.nickname != null && topic.nickname??) ?string(topic.nickname , topic.userName)}
                                    </a>
                                    <#list topic.userRoleNameList as roleName>
                                        <span class="userRoleName">${roleName}</span>
                                    </#list>
                                    <#if topic.isStaff>
                                        <span class="staff">官方人员</span>
                                    </#if>
                                    <span class="postTime">发表时间：${topic.postTime}</span>
                                    <#if topic.lastReplyTime != null>
                                        <span class="lastReplyTime">最新回复：${topic.lastReplyTime}</span>
                                    </#if>
                                </li>
                            </ul>
                            <h2 class="title clearfix">
                                <a href="thread?topicId=${topic.id}" target="_self">${topic.title}</a>
                                <#list topic.allowRoleViewList as roleName>
                                    <span class="topicRoleName">${roleName}</span>
                                </#list>
                                <#list topic.hideTagTypeMap as key, value>
                                    <span class="hideTagType hide_${key}" data="${key}">
		                      			<#if value?c == 'true'>
                                            <span class="circle point"><i class="cms-unlock-solid"></i></span>
		                      			<#else>
                                            <span class="circle"><i class="cms-lock-solid"></i></span>
                                        </#if>
			                      	</span>
                                </#list>
                                <#if topic.essence == true>
                                    <span class="essence">精华</span>
                                </#if>
                                <#if topic.sort gt 0>
                                    <span class="top">置顶</span>
                                </#if>
                                <#if topic.giveRedEnvelopeId != null && topic.giveRedEnvelopeId??>
                                    <span class="redEnvelope" title="红包"><i class="cms-redEnvelope-1"></i></span>
                                </#if>
                            </h2>
                            <div class="clearfix"></div>

                            <div class="detail">
                                <#--摘要一直显示-->
                                <#if topic.imageInfoList?size gt 0 || topic.mediaInfoList?size gt 0>
                                    <#if topic.imageInfoList?size gt 0>
                                        <div class="tm-m-photos topic_thumbnail_${topic.id}">
                                            <ul class="tm-m-photos-thumb">
                                                <#list topic.imageInfoList as imageInfo>
                                                <#-- 图片最多显示8张 -->
                                                    <#if imageInfo_index lt 8>
                                                        <li data-src="${imageInfo.path}${imageInfo.name}">
                                                            <#-- 本地缩略图 -->
                                                            <#if fileStorageSystem == 0>
                                                                <div class="img"
                                                                     style="background-image: url(${imageInfo.path}240x240/${imageInfo.name})"></div>
                                                            </#if>
                                                            <#-- SeaweedFS缩略图 使用nginx image_filter的缩略图处理功能 -->
                                                            <#if fileStorageSystem == 10>
                                                                <div class="img"
                                                                     style="background-image: url(${imageInfo.path}${imageInfo.name}?width=240)"></div>
                                                            </#if>
                                                            <#--  MinIO缩略图 使用nginx image_filter的缩略图处理功能 -->
                                                            <#if fileStorageSystem == 20>
                                                                <div class="img"
                                                                     style="background-image: url(${imageInfo.path}${imageInfo.name}?width=240)"></div>
                                                            </#if>
                                                            <#-- 阿里云OSS缩略图 -->
                                                            <#if fileStorageSystem == 30>
                                                                <div class="img"
                                                                     style="background-image: url(${imageInfo.path}${imageInfo.name}?x-oss-process=image/resize,w_240)"></div>
                                                            </#if>

                                                            <b class="tm-photos-arrow"></b></li>
                                                    </#if>
                                                </#list>
                                            </ul>
                                            <div class="tm-m-photo-viewer transition1 topic_original_${topic.id}">
                                                <img src="${commonPath}images/null.gif" alt="">
                                                <span class="tm-m-photo-viewer-navleft navleft_${topic.id}"></span>
                                                <span class="tm-m-photo-viewer-navright navright_${topic.id}"></span>
                                            </div>
                                        </div>
                                    <#else>
                                        <div class="videoInfo">
                                            <#list topic.mediaInfoList as mediaInfo>
                                            <#-- 视频最多显示3个 -->
                                                <#if mediaInfo_index lt 3>
                                                    <player url="${mediaInfo.mediaUrl}" cover="${mediaInfo.cover}"
                                                            thumbnail="${mediaInfo.thumbnail}">
                                                        <img class="cover" src="${mediaInfo.cover}" alt=""/>
                                                        <span class="circle">
                                                            <span class="iconBox"><i
                                                                        class="cms-control-play playIcon"></i></span>
                                                        </span>
                                                    </player>
                                                </#if>
                                            </#list>
                                        </div>
                                    </#if>
                                <#else>
                                <#--级别提前，所有情况均显示摘要-->
                                    <h2 class="summary">
                                        ${topic.summary}
                                    </h2>
                                </#if>

                                <script>
                                    $(function () {
                                        new commentMove(".topic_thumbnail_${topic.id}", ".topic_original_${topic.id}", "${topic.id}").init();
                                    })
                                </script>
                            </div>
                        </div>
                        <div class="statistic clearfix">
                            <div class="viewTotal">
                                <i class="cms-view icon"></i>
                                ${topic.viewTotal}
                            </div>

                            <div class="commentTotal">
                                <i class="cms-commentCount icon"></i>
                                ${topic.commentTotal}
                            </div>
                        </div>
                    </div>
                </#list>
            </#if>

            <div class="topicPage">
                <#assign pageView = topicRelated_topic_page>
                <#--引入分页-->
                <@include action="${newPublic_1}"/>
            </div>
        </div>
    </div>

    <style>
        /** 半透明提示层 **/
        .hideTag-class .layui-layer-content {
            background-color: rgba(0, 0, 0, 0.6);
        }
        .hideTag-class .layui-layer-content .layui-layer-TipsG {
            position: absolute;
            width: 0;
            height: 0;
            border-width: 5px;
            *overflow: hidden;

            border-style: dashed;
            border-color: rgba(0, 0, 0, 0.6) transparent transparent transparent;
            margin-bottom: -2px;
            margin-bottom: 3px \0;
            *margin-bottom: 3px;
        }
        .hideTag-class .layui-layer-content .layui-layer-TipsT {
            left: 7px;
            border-right-style: solid;
            border-right-color: rgba(0, 0, 0, 0.6);
        }
    </style>


    <script type="text/javascript">
        var tip_index = 0;
        $(".hideTagType").on('mouseenter', this, function () {
            var hideTagType = $(this).attr("data");
            var hideTagValue = "";
            if (hideTagType == 10) {
                hideTagValue = "输入密码可见";
            } else if (hideTagType == 20) {
                hideTagValue = "评论话题可见";
            } else if (hideTagType == 30) {
                hideTagValue = "达到等级可见";
            } else if (hideTagType == 40) {
                hideTagValue = "积分购买可见";
            } else if (hideTagType == 50) {
                hideTagValue = "余额购买可见";
            }
            tip_index = layer.tips(hideTagValue, $(this).children("span:first-child"), {
                tips: 1,//[1, "rgba(0, 0, 0,0.5)"],
                time: 1000,
                skin: 'hideTag-class'
            });
        }).on('mouseleave', this, function () {
            layer.close(tip_index);
        });
    </script>

    <script type="text/javascript">
        // 获取随机数
        function getRandom(m) {
            //生成的随机数截取m位，生成的随机数最大不超过13位，能保证首位不为0
            m = m > 13 ? 13 : m;
            var num = Math.random().toString();
            if (num.substr(num.length - m, 1) === '0') {
                return getRandom(m);
            }
            return num.substring(num.length - m);
        }

        //设置播放器标签
        function setPlayerTag() {
            //获取<player>标签属性
            $(".videoInfo").find("player").each(function () {
                var random = getRandom(13);

                var id = "player_" + random;
                var url = $(this).attr("url");
                var cover = $(this).attr("cover");//封面
                var thumbnail = $(this).attr("thumbnail");//缩略图
                //设置Id
                $(this).attr("id", id);

                $(this).click(function () {
                    $(this).unbind('click');//解绑事件
                    if (url === "") {//如果视频处理中
                        var dp = new DPlayer({
                            container: document.getElementById(id),//播放器容器元素
                            screenshot: false,//开启截图，如果开启，视频和视频封面需要开启跨域
                            video: {}
                        });
                        insertProcess(id);
                    } else {
                        if (cover !== undefined && cover !== "" && thumbnail !== undefined && thumbnail !== "") {//切片视频
                            var dp = new DPlayer({
                                container: document.getElementById(id),//播放器容器元素
                                screenshot: false,//开启截图，如果开启，视频和视频封面需要开启跨域
                                hotkey: true,
                                preload: 'none', //禁止视频预加载
                                video: {
                                    url: url,
                                    type: 'hls',
                                    // pic: cover,//视频封面
                                    // thumbnails: thumbnail//视频预览图
                                }
                            });
                            dp.play();//播放视频
                        } else {
                            var dp = new DPlayer({
                                container: document.getElementById(id),//播放器容器元素
                                screenshot: false,//开启截图，如果开启，视频和视频封面需要开启跨域
                                video: {
                                    url: url
                                }
                            });
                            dp.play();//播放视频
                        }
                    }
                });
            })
        }

        //插入处理提示层
        function insertProcess(id) {
            $("#" + id).prepend("<div class='dplayer-process'><div class='box'><div class='prompt'>视频处理中，请稍后再刷新</div></div></div>");
        }
        $(document).ready(function () {
            setPlayerTag();
        });
    </script>
</@function>
